<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit" />
    <title>jquery nestable 拖拽</title>
    <link rel="stylesheet" href="css/doc.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link rel="stylesheet" href="style.css" class="src">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        html {height: 100%;}
		a {color:#0e83e5;}
		.layui-card {border:1px solid #e6e6e6;}
	</style>
</head>

<body>
<div class="layui-container" style="padding-top:50px;">	
    <div id="nestable-menu">
        <button type="button" data-action="expand-all" class="layui-btn layui-btn-sm layui-btn-primary">Expand All</button>
        <button type="button" data-action="collapse-all" class="layui-btn layui-btn-sm layui-btn-primary">Collapse All</button>
    </div>

    <div class="layui-row layui-col-space20">
	    <div class="ibox layui-col-md6">
	        <div class="ibox-title">
	            <h5>可嵌套基本列表</h5>
	        </div>
	        <div class="ibox-content">
	            <p class="m-b-lg">
	                <strong>Nestable</strong> 是一个交互式分层列表。您可以拖放来重新排列顺序。它在触摸屏上运行良好。
	            </p>
	            <div class="dd" id="nestable">
	                <ol class="dd-list">
	                    <li class="dd-item" data-id="2"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
	                        <div class="dd-handle">2 - 列表</div>
	                        <ol class="dd-list">
	                            <li class="dd-item" data-id="1">
	                                <div class="dd-handle">1 - 列表</div>
	                            </li>
	                            <li class="dd-item" data-id="3">
	                                <div class="dd-handle">3 - 列表</div>
	                            </li>
	                            <li class="dd-item" data-id="4">
	                                <div class="dd-handle">4 - 列表</div>
	                            </li>
	                        </ol>
	                    </li>
	                    <li class="dd-item" data-id="5"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
	                        <div class="dd-handle">5 - 列表</div>
	                        <ol class="dd-list">
	                            <li class="dd-item" data-id="6">
	                                <div class="dd-handle">6 - 列表</div>
	                            </li>
	                            <li class="dd-item" data-id="7">
	                                <div class="dd-handle">7 - 列表</div>
	                            </li>
	                        </ol>
	                    </li>
	                    <li class="dd-item" data-id="8">
	                        <div class="dd-handle">8 - 列表</div>
	                    </li>
	                    <li class="dd-item" data-id="9">
	                        <div class="dd-handle">9 - 列表</div>
	                    </li>
	                </ol>
	            </div>
	            <div class="m-t-md">
	                <h5>序列化输出</h5>
	            </div>
	            <textarea id="nestable-output" class="form-control"></textarea>
	        </div>
	    </div>

	    <div class="ibox layui-col-md6">
	        <div class="ibox-title">
	            <h5>可嵌套自定义主题列表</h5>
	        </div>
	        <div class="ibox-content">
	            <p class="m-b-lg">
	                您可以通过标准的CSS样式定制每个列表。每个元素都是响应的，所以你可以添加任何其他元素来提高列表的功能。
	            </p>
	            <div class="dd" id="nestable2">
	                <ol class="dd-list">
	                    <li class="dd-item" data-id="1"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
	                        <div class="dd-handle">
	                            <span class="label label-info"><i class="fa fa-users"></i></span> 列表
	                        </div>
	                        <ol class="dd-list">
	                            <li class="dd-item" data-id="2">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 12:00 </span>
	                                    <span class="label label-info"><i class="fa fa-cog"></i></span> 列表
	                                </div>
	                            </li>
	                            <li class="dd-item" data-id="3">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 11:00 </span>
	                                    <span class="label label-info"><i class="fa fa-bolt"></i></span> 列表
	                                </div>
	                            </li>
	                            <li class="dd-item" data-id="4">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 11:00 </span>
	                                    <span class="label label-info"><i class="fa fa-laptop"></i></span> 列表
	                                </div>
	                            </li>
	                        </ol>
	                    </li>
	                    <li class="dd-item" data-id="5"><button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
	                        <div class="dd-handle">
	                            <span class="label label-warning"><i class="fa fa-users"></i></span> 列表
	                        </div>
	                        <ol class="dd-list">
	                            <li class="dd-item" data-id="6">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 15:00 </span>
	                                    <span class="label label-warning"><i class="fa fa-users"></i></span> 列表
	                                </div>
	                            </li>
	                            <li class="dd-item" data-id="7">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 16:00 </span>
	                                    <span class="label label-warning"><i class="fa fa-bomb"></i></span> 列表
	                                </div>
	                            </li>
	                            <li class="dd-item" data-id="8">
	                                <div class="dd-handle">
	                                    <span class="float-right"> 21:00 </span>
	                                    <span class="label label-warning"><i class="fa fa-child"></i></span> 列表
	                                </div>
	                            </li>
	                        </ol>
	                    </li>
	                </ol>
	            </div>
	            <div class="m-t-md">
	                <h5>序列化输出</h5>
	            </div>
	            <textarea id="nestable2-output" class="form-control"></textarea>
	        </div>
	    </div>
    </div>
</div>


<div class="layui-container" style="padding-top:50px;">	
    <div class="layui-row layui-col-space20">
    	<div class="ibox layui-col-md6 dd" id="item1">
    		<div class="layui-card"data-id="1"><div class="layui-card-header my-handle">Title-1</div><div class="layui-card-body">内容部分1</div></div>
    		<div class="layui-card"data-id="2"><div class="layui-card-header my-handle">Title-2</div><div class="layui-card-body">内容部分2</div></div>
    	</div>
    	<div class="ibox layui-col-md6" id="item2">
    		<div class="layui-card"data-id="3"><div class="layui-card-header my-handle">Title-3</div><div class="layui-card-body">内容部分3</div></div>
    		<div class="layui-card"data-id="4"><div class="layui-card-header my-handle">Title-4</div><div class="layui-card-body">内容部分4</div></div>
    	</div>
    	<div class="ibox layui-col-md6" id="item3">
			<div class="dd2">
			    <ol class="dd-list">
			        <li class="dd-item" data-id="1">
			            <div class="dd-handle">Item 1</div>
			        </li>
			        <li class="dd-item" data-id="2">
			            <div class="dd-handle">Item 2</div>
			        </li>
			        <li class="dd-item" data-id="3">
			            <div class="dd-handle">Item 3</div>
			        </li>
			    </ol>
			</div>
		</div>
    </div>
</div>







</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.nestable.js"></script>
<script>
$(document).ready(function() {

    var updateOutput = function(e) {
        var list = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };
    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    }).on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    }).on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput($('#nestable2').data('output', $('#nestable2-output')));

    $('#nestable-menu').on('click', function(e) {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });



    $('#item1').nestable({
        group: 1
    }).on('change', updateOutput);

    // activate Nestable for list 2
    $('#item2').nestable({
        group: 1
    }).on('change', updateOutput);

    $('#item3').nestable({
        group: 1
    }).on('change', updateOutput);





});
</script>

</html>